CSS编译工具Less的基础用法

来源:07素材网 01月19日 10:54
1. 变量
//less
@color: #4D926F;

//使用
#header {
  color: @color;
}
2. 混合
//less
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
}

//使用
#footer {
  .rounded-corners(10px);
}
3. 运算
//less
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

@arguments包含了所有传递进来的参数

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
}
4. 条件判断
//less
.arrow(@direction,@color,@pixel:5px) when (@direction = up) {
    .arrowUp(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = down) {
    .arrowDown(@color);
    .arrowSet(@pixel);
}

//使用
div.d1{
    .arrow(right,red);
}
原文出处:https://www.cnblogs.com/yaotu/p/10272787.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

头条

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

《本打算在SQLite3数据库里执行一个查询语句,使用的是php语言,起初遇到的是权限问题: permission denied,因为SQLite3数据库文件和PHP执行者属于两个不同的用户,首先需要对这个文件执行mode 777的权限开放,然后,又遇到了下面这样的PHP错误